<template>
  <div style=" background: #ffffff">
    <van-nav-bar title="注册" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div>
      <div class="user_box">
        <div class="user_bd" id="verifyBox">
          <input
            type="hidden"
            value="c3c83c8bbc1130793767f9681e852ce0;?>"
            name="is_reg_key97"
            id="is_reg_key97"
          />
          <div class="fl">
            <img src="../img/ico_tx.png" />
          </div>
          <div class="fr" style="width:50%;">
            <input
              id="verifyimgcode"
              name
              type="text"
              placeholder="请输入图形验证码"
              v-model.trim="yanzheng"
            />
          </div>
          <div class="tx" id="verifyimg">
            <!-- <img src="/Account/verifyCode" title="点击刷新" /> -->
            <app-yanzhengma :value.sync="validCode"></app-yanzhengma>
          </div>
        </div>
        <div class="user_bd">
          <div class="fl">
            <img src="../img/ico_mob.png" />
          </div>
          <div class="fr" style="width:80%;">
            <input id="mobile" name type="text" placeholder="请输入手机号" v-model.trim="phone" />
          </div>
        </div>
        <div class="user_bd">
          <div class="fl">
            <img src="../img/ico_ma.png" />
          </div>
          <div class="fr" style="width:40%;">
            <input name id="verifycode" type="text" placeholder="此处不填,空着就好" />
          </div>
          <div class="yzm" onclick="sendVerifycode(this)">不获取验证码</div>
          <!-- 添加“off”样式来改变颜色-->
        </div>
        <div class="user_bd">
          <div class="fl">
            <img src="../img/ico_lock.png" />
          </div>
          <div class="fr">
            <input
              id="password"
              name
              type="password"
              placeholder="请输入密码"
              v-show="isok"
              v-model.trim="psw"
            />
            <input id="mpassword" type="text" v-show="isok2" v-model="psw" />
          </div>
          <div class="mm_ico" :class="{on:ison}" @click="isonck"></div>
          <!--添加“on”样式来改变密码框眼睛图标-->
        </div>
        <button class="dl_but" @click="save()">注册</button>
        <!--输入密码后 添加“dl”样式来改变按钮颜色-->

        <div class="user_bd" style="border-bottom:none; font-size:12px; width:90%; ">
          <p>
            注册即表示同意快乐购
            <a class="sa" href="/service.html">《用户服务协议》</a>条款
          </p>
        </div>
      </div>
      <div class="user_bottom"><p>遇到问题？请联系客服: <a href="tel:400-705-1111">400-705-1111</a></p></div>
    </div>
  </div>
</template>
<script>
import appYanzhengma from "../components/appyanzhengma";
export default {
  data() {
    return {
      ison: false,
      mima: "",
      isok: true,
      isok2: false,
      psw: "",
      phone: "",
      yanzheng: "",
      validCode: ""
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    isonck() {
      //改变密码的眼睛以及背景文字
      this.ison = !this.ison;
      this.isok = !this.isok;
      this.isok2 = !this.isok2;
    },
    async check(phone) {//发送请求验证是否存在用户
      let { data } = await this.$axios.get(
        "http://localhost:5555/listbo/checkphone",
        {
          params: { phone }
        }
      );
    //   console.log(data.msg);
      
      if(data.msg== "可以注册"){
          this.reg(phone)
      }else{
          alert("手机号被注册了，换一个吧")
      }
    },
    async reg(phone) {//发送请求验证是否存在用户
      let { data } = await this.$axios.post(
        "http://localhost:5555/listbo/reg",
        {
          phone:this.phone , psw:this.psw
        }
      );
      window.console.log(data);
      if(data.type==1){
          
          this.$router.push({ name: "login",query:phone})
      }
    },
    save() {
      if (this.yanzheng === "") {
        alert("请输入图形验证码");
      }else{
          if (this.phone === "") {
        alert("手机号不能为空");
      } else {
        if (this.phone !== "") {
          var reg = /^1[3456789]\d{9}$/;
          if (!reg.test(this.phone)) {
            alert("请输入正确的手机号");
          }else{
             if (this.psw === "") {
        alert("请输入密码")
      } else if (this.psw.length < 6) {
        alert ("密码长度最小6位")
      } else{
          this.check(this.phone) 
          console.log(this.phone);
      }
          }
        }
      }
      }

    }
  },
  components: {
    appYanzhengma
  }
};
</script>
<style>
.user_bd .yzm {
  width: 45%;
  height: 45px;
  float: right;
  font-size: 14px;
  line-height: 45px;
  color: #85747a;
  text-align: center;
}
.user_bd .tx {
  width: 30%;
  height: 45px;
  float: right;
}
a {
  color: #000;
  text-decoration: none;
  outline: none;
}
.user_box {
  width: 100%;
  overflow: hidden;
  margin-top: 5%;
}
.user_bd {
  width: 80%;
  margin: 10px auto 0 auto;
  height: 45px;
  overflow: hidden;
  border-bottom: 1px solid #e1e1e1;
}
.user_bd .fl {
  float: left;
  margin-top: 0%;
}

.user_bd .fl img {
  width: 50%;
}
.user_bd .fr {
  width: 70%;
  float: left;
  height: 45px;
  overflow: hidden;
}
.user_bd .fr input {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  margin-top: 10px;
}
.user_bd .fr input {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  margin-top: 10px;
}
.user_bd .fr input {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  margin-top: 10px;
}
.user_bd .mm_ico {
  width: 20px;
  height: 12px;
  margin-right: 3%;
  float: right;
  margin-top: 17px;
  background: url(../img/eye1.png) no-repeat scroll 0 0;
  background-size: 100% 100%;
}
.user_bd .on {
  background: url(../img/eye2.png) no-repeat scroll 0 0;
  background-size: 100% 100%;
}
.user_dd {
  width: 80%;
  margin: 10px auto 0 auto;
  height: 45px;
  overflow: hidden;
  border-bottom: 1px solid #e1e1e1;
}
.user_dd .fl {
  float: left;
  margin-top: 0%;
}
.user_dd .fl img {
  width: 50%;
}
.user_dd .fr {
  width: 38%;
  float: left;
  height: 45px;
  overflow: hidden;
}
.user_dd .fr input {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  margin-top: 10px;
}
.user_box .dl_but {
  border-radius: 0.3rem;
  width: 80%;
  margin: 20px 10%;
  background: #94193f;
  color: #a94765;
  height: 35px;
  text-align: center;
  line-height: 35px;
  font-size: 16px;
}
input {
  font-family: "微软雅黑", Helvetica;
  border: none;
  background: none;
}
.zc {
  text-align: left;
  line-height: 30px;
  color: #bd315c;
  display: block;
  float: left;
  font-size: 14px;
}
.wj {
  text-align: right;
  line-height: 30px;
  color: #bd315c;
  font-size: 14px;
  display: block;
  float: right;
}
.user_dd .mm_dco {
  width: 3rem;
  height: 0.5rem;
  float: right;
  margin-top: 2.5%;
  /* background: url(../img/iocn-4.jpg) no-repeat scroll 0 0; */
  background-size: 100% 100%;
  font-size: 14px;
}
.user_bottom {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 110px;
}
.user_bottom p {
    display: block;
    width: 94%;
    margin: 0 auto;
    overflow: hidden;
    color: #777777;
    padding: 15px 0;
    font-size: 14px;
    text-align: center;
}
.user_bottom p a {
    color: #8a6774;
    text-decoration: underline;
}
</style>